<template>
    <div class="wholeContainer1">
        <div class="container">
            <div class="title">个人信息修改</div>
            <div class="contentContainer">
                <div class="inputItem">
                    <div class="inputInfo">昵称：</div>
                    <input type="text" placeholder="请输入昵称" class="nickInput" v-model="userInfo1.nickname"/>
                </div>
                <div class="inputItem"> 
                    <div class="inputInfo">性别：</div>
                    <div class="option">
                        <input type="radio" id="male" value="0" v-model="userInfo1.gender"/>
                        <label for="male">男</label>
                    </div>
                    <div class="option">
                        <input type="radio" id="female" value="1" v-model="userInfo1.gender" />
                        <label for="female">女</label>  
                    </div>
                </div>
                <div class="inputItem1">
                    <div class="inputInfo">个性签名：</div>
                    <textarea placeholder="请输入个性签名" v-model="userInfo1.signature"></textarea>
                </div>
                <div class="btnContainer">
                    <button class="submitBtn1" @click="returnPage">返回</button>
                    <button class="submitBtn2" @click="submit">提交修改</button>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'editInfo',
    data(){
        return{
            userInfo1:{},
        }
    },
    props:['userInfo'],
    methods:{
        returnPage(){
            this.$emit('returnPage',false)
        },
        submit(){
            // console.log(this.userInfo1)
            this.$axios({
                method:'put',
                url:'/api/users',
                data:{
                    ...this.userInfo1
                },
                headers:{
                    'Content-Type':'application/json',
                    'token':localStorage.getItem('token')
                }
            }).then(res=>{
                console.log(res)
                if(res.data.code==1){
                    this.$emit('returnPage',false)
                    this.$router.go(0)
                }
            })
        }
    },
    mounted(){
        // 在userInfo1中复制一份userInfo，防止直接修改userInfo
        this.userInfo1 = {...this.userInfo}
    }
}
</script>

<style scoped>
    textarea{
        width:390px;
        height: 100px;
        border-radius: 5px;
        border: 1px solid #aaa;
        padding: 5px;
        resize: none;
        font-size: 16px;
        font-family: 'SimHei';
        margin-top: 5px;
    }
    .wholeContainer1{
        width: 100%;
        height: 100%;
        background-color: rgba(79, 79, 79, 0.5);
        position: fixed;
        margin-top: 0;
        padding-right:40px;
        z-index: 100;
    }
    .container{
        width: 400px;
        height: 500px;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 10px;
        margin-top: 120px;
        padding: 10px 100px;
        background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('../../assets/bgLight.jpg') no-repeat;
    }
    .contentContainer{
        margin-top: 50px;
    }
    .title{
        font-size: 30px;
        text-align: center;
        margin-bottom:30px;
        margin-top: 12px;
    }
    .inputItem{
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom:25px;
        margin-top: 30px;
    }
    .inputItem1{
        width: 100%;
        align-items: center;
        margin-bottom: 25px;
        margin-top: 30px;
    }
    .nickInput{
        height:18px;
        padding: 3px 5px;
    }
    .option{
        margin-left: 10px;
        margin-right: 10px;
    }
    .option input{
        margin-right: 5px;
    }
    .inputInfo{
        font-size: 16px;
        font-family: 'SimHei';
        height: 20px;
        line-height: 20px;
    }
    .submitBtn1{
        width: 48%;
        height: 40px;
        border-radius: 20px;
        color: #4d4d4d;
        border: 2px solid #4d4d4d;
        font-size: 16px;
        cursor: pointer;
        margin-top: 30px;
    }
    .submitBtn1:hover{
        background-color: #4d4d4d;
        color: #fff;
    }
    .submitBtn2{
        width: 48%;
        height: 40px;
        border-radius: 20px;
        color: #fff;
        border: 2px solid #4d4d4d;
        font-size: 16px;
        cursor: pointer;
        margin-top: 30px;
        background-color: #4d4d4d;
    }
    .submitBtn2:hover{
        color: #4d4d4d;
        border: 2px solid #4d4d4d;
        background-color: #fff;
    }
    .btnContainer{
        display: flex;
        justify-content: space-between;
    }
</style>